<template>
  <div class="box">
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 登录
    </div>
    <div class="ipt">
      <van-field
      v-model="text"
        placeholder="手机号/用户名/邮箱"
        class="username"
      />
      <van-field
        v-model="password"
        type="password"
        placeholder="请输入密码"
        class="password"
      />
    </div>
    <van-button class="btn" color="linear-gradient(to right, #ff6034, #ee0a24)">
      登录
    </van-button>
    <p class="goreg" @click="goReg">
      手机快速注册
    </p>
  </div>
</template>
<script>
export default {
  name: "Login",
  // components: {},
  methods: {
    goReg() {
      this.$router.push("/Reg");
      // this.$router.replace("/Reg");
    },
    goBack() {
      this.$router.replace("/");
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
}
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.ipt {
  width: 20rem;
  height: 6rem;
  margin: 2rem auto;
}
.btn{
    margin: 0 auto;
    width: 80%;
    display: block;
    border-radius: 5rem;
}
.goreg{
  text-align: right;
  margin: 1rem;
  font-size: 0.7rem;
  color: blue;
}
.goreg:active{
  color: rgb(255, 77, 0);
}
</style>